<template>
  <div class="policy-page w">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <el-page-header>
          <template #title>
            <el-text size="large" tag="b">Policies</el-text>
          </template>
          <template #content>
            <el-text size="large" type="primary" tag="b">Export Restrictions</el-text>
          </template>
        </el-page-header>
      </template>

      <el-scrollbar height="calc(100vh - 280px)">
        <el-space direction="vertical" alignment="stretch" style="width: 100%">
          <div class="policy-section">
            <h2 class="policy-title">1. Export Compliance</h2>
            <el-text class="policy-text">
              Our products are subject to export control laws and regulations. Customers are responsible for complying with
              all applicable export restrictions when purchasing and shipping our products internationally.
            </el-text>
            <el-text class="policy-text">
              We maintain strict compliance with international trade regulations and export control measures to ensure
              lawful trade practices and national security requirements are met.
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="policy-title">2. Restricted Countries</h2>
            <el-text class="policy-text">
              Due to international regulations and company policy, we cannot ship certain products to specific countries or
              regions. Please check our shipping countries list for detailed information.
            </el-text>
            <el-text class="policy-text">
              Current restricted regions include but are not limited to:
              <ul class="restricted-list">
                <li>North Korea</li>
                <li>Iran</li>
                <li>Syria</li>
                <li>Cuba</li>
                <li>Crimea Region</li>
              </ul>
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="policy-title">3. Documentation Requirements</h2>
            <el-text class="policy-text">
              For international shipments, additional documentation may be required, including but not limited to:
              <ul class="doc-list">
                <li>Customs declarations</li>
                <li>Commercial invoices</li>
                <li>Export licenses</li>
                <li>End-user certificates</li>
                <li>Bills of lading</li>
              </ul>
            </el-text>
          </div>

          <div class="policy-section">
            <h2 class="policy-title">4. Compliance Responsibilities</h2>
            <el-text class="policy-text">
              Customers must ensure:
              <ul class="responsibility-list">
                <li>Products are not re-exported to restricted countries</li>
                <li>All required licenses are obtained before shipment</li>
                <li>End-use declarations are accurate and complete</li>
                <li>Compliance with local import/export regulations</li>
              </ul>
            </el-text>
          </div>

          <el-divider>Additional Information</el-divider>

          <el-alert title="Compliance Notice" type="warning" :closable="false" show-icon>
            <el-text class="mx-1">Ensure compliance with local import regulations before ordering</el-text>
          </el-alert>

          <el-alert title="Export Support" type="info" :closable="false" show-icon>
            <el-text class="mx-1">Contact our export compliance team at export@company.com for specific questions about restrictions</el-text>
          </el-alert>
        </el-space>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-text {
  line-height: 1.8;
  display: block;
  margin: 10px 0;
}

.policy-section {
  margin-bottom: 30px;
}

.policy-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
}

.restricted-list,
.doc-list,
.responsibility-list {
  margin: 10px 0;
  padding-left: 20px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}
</style>